<template>
  <div class="home-page">
    <!-- 上半部分：六个元素展示 z这是首页。-->
    <div class="top-section">
      <el-card v-for="(item, index) in topItems" :key="index" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ item.title }}</span>
        </div>
        <div class="text item">
          {{ item.count }}
        </div>
      </el-card>
    </div>

    <!-- 下半部分：待办列表 -->
    <div class="bottom-section">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="全部计划" name="all"></el-tab-pane>
        <el-tab-pane label="本周计划" name="weekly"></el-tab-pane>
        <el-tab-pane label="本月计划" name="monthly"></el-tab-pane>
        <el-tab-pane label="季度计划" name="quarterly"></el-tab-pane>
      </el-tabs>
      <el-table :data="paginatedTodoList" style="width: 100%">
        <el-table-column type="index" ></el-table-column>
        <el-table-column prop="workCode" label="工作编码" ></el-table-column>
        <el-table-column prop="workName" label="工作名称"></el-table-column>
        <el-table-column prop="planStartTime" label="计划开始时间"></el-table-column>
        <el-table-column prop="planEndTime" label="计划完成时间" ></el-table-column>
        <el-table-column prop="status" label="工作状态" >
          <template #default="scope">
            <el-tag :type="scope.row.status === '进行中' ? 'warning' : 'success'" disable-transitions>{{
              scope.row.status
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="当前进度" >
          <template #default="scope">
            <el-progress :percentage="scope.row.progress" :color="customColors"></el-progress>
          </template>
        </el-table-column>
  <!--       <el-table-column label="是否已读">
          <template #default="scope">
            <el-tag :type="scope.row.isRead ? 'success' : 'info'" disable-transitions>{{
              scope.row.isRead ? '已读' : '未读'
            }}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" >
          <template #default="scope">
            <el-button size="small" @click="handleViewDetails(scope.$index, scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredTodoList.length"
          :page-size="pageSize"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';
import { ElCard, ElTable, ElTableColumn, ElTag, ElTabs, ElTabPane, ElProgress, ElButton, ElPagination, ElMessage } from 'element-plus';

export default defineComponent({
  components: {
    ElCard,
    ElTable,
    ElTableColumn,
    ElTag,
    ElTabs,
    ElTabPane,
    ElProgress,
    ElButton,
    ElPagination,
  },
  setup() {
    const activeTab = ref('all');
    const currentPage = ref(1);
    const pageSize = ref(10);

    const topItems = [
      { title: '待审批项目', count: 5 },
      { title: '待审批合同', count: 3 },
      { title: '待执行项目', count: 4 },
      { title: '待编制计划', count: 2 },
      { title: '待审查计划', count: 6 },
      { title: '待执行合同', count: 7 },
    ];

    const todoList = [
      { workCode: 'W001', workName: '待审批项待审批项目待审批项目待审批项目待审批项目目项目A', planStartTime: '2023-10-01', planEndTime: '2023-10-10', status: '进行中', progress: 30, isRead: false },
      { workCode: 'W002', workName: '待审批项目待审批项目待审批项目项目B', planStartTime: '2023-10-02', planEndTime: '2023-10-15', status: '已办结', progress: 100, isRead: true },
      { workCode: 'W003', workName: '项目C', planStartTime: '2023-10-09', planEndTime: '2023-10-20', status: '进行中', progress: 50, isRead: false },
      { workCode: 'W004', workName: '项目D', planStartTime: '2023-11-01', planEndTime: '2023-11-10', status: '进行中', progress: 20, isRead: false },
      { workCode: 'W005', workName: '项目E', planStartTime: '2023-12-01', planEndTime: '2023-12-10', status: '已办结', progress: 100, isRead: false },
      // 更多数据...
    ];

    const customColors = [
      { color: '#f56c6c', percentage: 20 },
      { color: '#e6a23c', percentage: 40 },
      { color: '#5cb87a', percentage: 60 },
      { color: '#1989fa', percentage: 80 },
      { color: '#6f7ad3', percentage: 100 },
    ];

    const filteredTodoList = computed(() => {
      if (activeTab.value === 'all') {
        return todoList;
      }
      const now = new Date();
      const startOfWeek = new Date(now.setDate(now.getDate() - now.getDay()));
      const endOfWeek = new Date(startOfWeek);
      endOfWeek.setDate(endOfWeek.getDate() + 6);

      const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
      const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);

      const startOfQuarter = new Date(now.getFullYear(), Math.floor(now.getMonth() / 3) * 3, 1);
      const endOfQuarter = new Date(startOfQuarter);
      endOfQuarter.setMonth(endOfQuarter.getMonth() + 3);
      endOfQuarter.setDate(0);

      switch (activeTab.value) {
        case 'weekly':
          return todoList.filter(item => {
            const startTime = new Date(item.planStartTime);
            return startTime >= startOfWeek && startTime <= endOfWeek;
          });
        case 'monthly':
          return todoList.filter(item => {
            const startTime = new Date(item.planStartTime);
            return startTime >= startOfMonth && startTime <= endOfMonth;
          });
        case 'quarterly':
          return todoList.filter(item => {
            const startTime = new Date(item.planStartTime);
            return startTime >= startOfQuarter && startTime <= endOfQuarter;
          });
        default:
          return todoList;
      }
    });

    const paginatedTodoList = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value;
      const end = start + pageSize.value;
      return filteredTodoList.value.slice(start, end);
    });

    const handleTabClick = () => {
      currentPage.value = 1; // 切换标签时重置页码
    };

    const handlePageChange = (newPage) => {
      currentPage.value = newPage;
    };

    const handleSizeChange = (newPageSize) => {
      pageSize.value = newPageSize;
      currentPage.value = 1; // 改变每页大小时重置页码
    };

    const handleViewDetails = (index, row) => {
      ElMessage.info(`查看 ${row.workName} 的详情`);
      // 这里可以添加跳转到详情页面的逻辑
    };

    return {
      activeTab,
      currentPage,
      pageSize,
      topItems,
      todoList,
      filteredTodoList,
      paginatedTodoList,
      customColors,
      handleTabClick,
      handlePageChange,
      handleSizeChange,
      handleViewDetails,
    };
  },
});
</script>

<style scoped>
.home-page {
  padding: 20px;
}

.top-section {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.box-card {
  width: 15%;
  text-align: center;
  padding-bottom: calc((100% - 240px) /20); /* Makes the box a square */
}

.bottom-section {
  background-color: white;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>


